<template>
   <div class="box">
      <div class="top">
         <p class="title">实时游客统计</p>
         <p class="bg"></p>
         <p class="right">可预约总量<span class="count">999999</span>人</p>
      </div>
      <div class="number">
         <span v-for="(item, index) in people" :key="index">{{ item }}</span>
      </div>
      <!-- echarts展示位置 -->
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
// 水球图插件
import 'echarts-liquidfill'
// 获取图表展示节点
let charts = ref()
onMounted(() => {
   // 获取echarts类的实例
   let mycharts = echarts.init(charts.value)
   // 设置实例的配置项
   mycharts.setOption({
      // 标题组件
      // title: {
      //    text: '水球图'
      // },
      // x|y轴组件
      // xAxis: {},
      // yAxis: {},
      // 系列决定你展示什么样类型的图形图表
      series: {
         type: 'liquidFill',
         data: [{ name: '预约量' }, 0.5],
         radius: '80%',
         name: '预约量',
         label: {
            fontSize: 18,
            color: '#29fcff'
         },
         color: ['#29fcff'],
         outline: {
            borderDistance: 0,
            itemStyle: {
               borderWidth: 5,
               borderColor: '#29fcff',
               shadowBlur: 20,
               shadowColor: '#29fcff'
            }
         }
      },
      tooltip: {
         trigger: 'item',
         formatter: '{a}: {c} '
      },
      // tooltip: {
      //    show: true
      // }
      // 布局组件
      // grid: {
      //    left: 40,
      //    right: 40,
      //    top: 40,
      //    bottom: 40
      // }
   })
})
let people = ref('215908人')
</script>

<style lang="scss" scoped>
.box {
   background: url(../../images/dataScreen-main-lt.png) no-repeat;
   background-size: cover;

   .top {

      .title {
         color: white;
         font-size: 20px;
      }

      .bg {
         width: 68px;
         height: 7px;
         background: url(../../images/dataScreen-title.png) no-repeat;
         background-size: cover;
         margin-top: 10px;
      }

      .right {
         float: right;
         color: white;
         margin-right: 10px;

         .count {
            color: orange;
         }
      }
   }

   .number {
      margin: 30px 10px 10px;
      display: flex;

      span {
         flex: 1;
         height: 50px;
         text-align: center;
         line-height: 50px;
         background: url(../../images/total.png) no-repeat;
         background-size: cover;
         color: #29fcff;
         font-size: 30px;
      }
   }

   .charts {
      width: 100%;
      height: 250px;
   }
}
</style>